<template>
	<view>
		<view class="user-title">用户名列表查看</view>

		<u-table>
			<u-tr>
				<u-th>用户名</u-th>
				<u-th>身份证号</u-th>
			</u-tr>
			<u-tr v-for="item in userList" :key="item.userId">
				<u-td>{{item.userName}}</u-td>
				<u-td>{{item.userIdCard}}</u-td>
			</u-tr>
		</u-table>

		<view style="margin-top: 30px;">
			<uni-pagination show-icon="true" :total="total" :current="current" class="page-jump" :pageSize="pageSize" @change="jumpPage">
			</uni-pagination>

			<view>总条数：{{total}}</view>
			<view>当前页：{{current}}</view>
			<view>每页显示条数：{{pageSize}}</view>
		</view>
	</view>
</template>

<script>
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	export default {
		data: () => {
			return {
				userList: [],
				total: '1',
				current: '1',
				pageSize: '1'
			}
		},
		onLoad() {
			this.selectUserInfoByPage(this.current)
		},
		methods: {
			jumpPage(param) {
				this.userList = []
				console.log(param.current)
				this.selectUserInfoByPage(param.current)
			},

			selectUserInfoByPage(currentPage) {
				uni.request({
					url: 'register/selectUserByPage/' + currentPage,
					method: 'GET',
					success: (res) => {
						if (res.data.message == 'success') {
							this.total = res.data.data.total
							this.current = currentPage
							this.pageSize = res.data.data.size
							let obj = res.data.data.records
							for (let i = 0; i < obj.length; i++) {
								this.userList.push(obj[i]);
							}

						} else {
							uni.showToast({
								title: '查询识别，请检查接口！',
								duration: 2000
							});
						}
					}
				})
			}
		},
		components: {
			uniPagination
		}
	}
</script>

<style>
	.user-title {
		font-size: 25px;
		text-align: center;
	}
</style>
